@php
    $k = "0";
    $j = 0;
    $group = [];
    $option = "";
    $attrValue = [];
    foreach ($options['package_value'] as $key => $b) {
        foreach ($b as $c) {
            $attrValue[$options['package_attr'][$key]][$c['id']] = $c['value'];
        }
    }
    $default = '';
    foreach ($options['package_attr'] as $key => $a) {
        $group[$a] = $a;
        $default = $a;
    }
@endphp
@if(is_null($options['value']))
    <div style="position:relative">
        <span class="span-X"><a><i class="fa fa-close"></i></a></span>
        <div class="form-group">
            {!! Form::customLabel("service[$k][name]", "类别名", $options['label_attr']) !!}
            {!! Form::select("service[$k][name]", $group, $default, ['class' => "form-control package-attr", 'style' => 'width:739px;', "data-attr-id" => "$k"]) !!}
        </div>
        {!!  Form::input('button', 'increase_text_add', "添加产品", ['class' => "btn btn-primary btn-xs increase_text_add", 'style' => "margin: 20px 30px;", 'data-attr-id' => 0]) !!}
        <div class="attr-value" data-attr-id="{{ $k }}">
            <div style="position:relative">
                <div class='form-group'>
                    {!! Form::customLabel("service[$k][value][$j][name]", "产品名", $options['label_attr']) !!}
                    {!! Form::select("service[$k][value][$j][id]", $attrValue[$default]??"", null, ['data-value-id' => "$k", 'style' => 'width:550px', 'class' => "form-control"]) !!}
                </div>
                <div class='form-group'>
                    {!! Form::customLabel("service[$k][value][$j][number]", "数量", $options['label_attr']) !!}
                    {!! Form::text("service[$k][value][$j][number]", 1, ['class' => "form-control", 'style' => 'width:100px']) !!}
                </div>
                <span class="span-X2" data-id="{{ $j }}"><a><i class="fa fa-close"></i></a></span>
                <div class="row"></div>
            </div>
        </div>
        
        <hr />
    </div>
@else
    @foreach($options['value'] as $item)
        @if(isset($attrValue[$item['name']]))
            <div style="position:relative">
                <span class="span-X"><a><i class="fa fa-close"></i></a></span>
                <div class="form-group">
                    {!! Form::customLabel("service[$k][name]", "类别名", $options['label_attr']) !!}
                    {!! Form::select("service[$k][name]", $group, $item['name'], ['class' => "form-control package-attr", 'style' => 'width:739px;', "data-attr-id" => "$k"]) !!}
                </div>
                {!!  Form::input('button', 'increase_text_add', "添加产品", ['class' => "btn btn-primary btn-xs increase_text_add", 'style' => "margin: 20px 30px;", 'data-attr-id' => $k]) !!}
                <div class="attr-value" data-attr-id="{{ $k }}">

                    @foreach($item['value'] as $item2)
                    <div>
                        <div class='form-group'>
                            {!! Form::customLabel("service[$k][value][$j][name]", "产品名", $options['label_attr']) !!}
                            {!! Form::select("service[$k][value][$j][id]", $attrValue[$item['name']], $item2['id'], ['data-value-id' => "$k", 'style' => 'width:550px', 'class' => "form-control"]) !!}
                        </div>
                        <div class='form-group'>
                            {!! Form::customLabel("service[$k][value][$j][number]", "数量", $options['label_attr']) !!}
                            {!! Form::text("service[$k][value][$j][number]", $item2['number']??1, ['class' => "form-control", 'style' => 'width:100px']) !!}
                        </div>
                        <span class="span-X2" data-id="{{ $j }}"><a><i class="fa fa-close"></i></a></span>
                        <div class="row"></div>
                    </div>
                        @php
                            $j ++;
                        @endphp
                    @endforeach
                </div>
                
                <hr />
                @php
                    $k ++;
                @endphp
            </div>
        @endif
    @endforeach
@endif

{!!  Form::input('button', 'increase_area_add', "添加类别", ['class' => "btn btn-primary btn-sm", 'style' => "margin: 20px 30px;", 'id' => "increase_area_add"]) !!}

@push('scripts')
    <script>

        var k = '{{ $k }}';
        var j = {{ $j }};
        var optionValue = [];
        @php
            foreach ($group as $key => $a) {
                $option .= "<option value='{$key}' ". ($default == $key? "selected='selected'" : "") .">{$a}</option>";
            }
            foreach ($attrValue as $key => $tmp) {
                $string = "";
                foreach ($tmp as $key1 => $tmp1) {
                    $string .= "<option value='{$key1}'>{$tmp1}</option>";
                }
                echo "optionValue['{$key}'] = \"{$string}\";"."\n";
            }
        @endphp
        var selectOption = optionValue['{{ $default }}'];
        var option = "{!! $option !!}";
        $(document).on('click', '.increase_text_add',function () {
            j += 1;
            k = $(this).attr('data-attr-id');
            val = $(".package-attr[data-attr-id=\"" + k + "\"]").val();
            selectOption = optionValue[val];
            var node = getText(k, j);
            $(".attr-value[data-attr-id='"+ k +"']").append(node);
        });

        $('#increase_area_add').on('click', function () {
            k += 1;
            j += 1;
            var node = getArea(k, j);
            $(this).before(node);
        });

        $(document).on('change', ".package-attr", function () {
            k = $(this).attr('data-attr-id');
            j += 1;
            val = $(this).val();
            selectOption = optionValue[val];
            var node = getText(k, j);
            $(".attr-value[data-attr-id='"+ k +"']").html(node);
        });

        $(document).on('click', ".span-X2", function () {
            $(this).parent().remove();
        });

        $(document).on('click', ".span-X", function () {
            $(this).parent().remove();
        });

        function getText(k, j) {
            return "<div> <div style='margin:10px 0px' class='form-group'><label style='width:80px;text-align: center;' for=\"service[" + k +"][value][" + j + "][name]\" class=\"control-label required\">产品名</label><select style='width:550px;margin: 0px 5px;' data-value-id=\"1\" class=\"form-control\" id=\"service[" + k + "][value]["+ j +"][name]\" name=\"service[" + k + "][value][" + j + "][id]\"> "+ selectOption +" </select></div>" +
                "<div class='form-group'><label style='width:80px;text-align: center;' for=\"service[" + k +"][value][" + j + "][number]\" class=\"control-label\">数量</label><input type=\"text\" style='width:100px;margin: 0px 2px;' class=\"form-control\" value=\"1\" name=\"service[" + k +"][value][" + j + "][number]\" id=\"service[" + k +"][value][" + j + "][number]\" /></div>" +
                "<span class=\"span-X2\" data-id=\"" + j + "\"><a><i class=\"fa fa-close\"></i></a></span><div class=\"row\"></div></div>";
        }
        function getArea(k, j) {
            selectOption = optionValue['{{ $default }}'];
            return "<div style=\"position:relative\">\n" +
                "    <span class=\"span-X\"><a><i class=\"fa fa-close\"></i></a></span>" +
                "    <div class=\"form-group\">\n" +
                "        <label style='width:80px;text-align:center' for=\"service[" + k +"][name]\" class=\"control-label required\">类别名</label>\n" +
                "        <select style='width:739px;' class=\"form-control package-attr\" data-attr-id=\"" + k +"\" id=\"service[" + k +"][name]\" name=\"service[" + k +"][name]\">" + option + "</select>\n" +
                "    <input class=\"btn btn-primary btn-xs increase_text_add\" style=\"margin: 20px 30px;\" name=\"increase_text_add\" data-attr-id=\"" + k +"\" type=\"button\" value=\"添加产品\">\n" +
                "    </div>\n" +
                "    <div class=\"attr-value\" data-attr-id=\"" + k +"\">\n" +
                getText(k, j) + "\n"+
                "    </div>\n" +
                "    <hr />\n" +
                "</div>\n";
        }
    </script>
@endpush
@push('stylesheets')
    <style>
        .span-X {
            position: absolute;
            border-radius: 10px;
            top: 20px;
            /*right: -8px;*/
            left: 830px;
            padding: 3px;
            line-height: 0;
            background-color: rgba(190,190,190,0.50);
        }
        .span-X2 {
            margin-left: 5px;
            padding: 3px;
            border-radius: 10px;
            background-color: rgba(190,190,190,0.50);
        }
    </style>
@endpush
